<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="mini"
      @click="handleAdd"
    >新增</el-button>

    <DrawingLineSelect ref="drawingLineSelect" :drawCode="queryParams.drawCode" @onSelected="onDrawSelected"/>

    <el-table :data="routeProcessDrawingList" border>
      <el-table-column label="图纸名称" align="center" prop="lineName"/>
      <el-table-column label="图号" align="center" prop="lineNumber"/>
      <el-table-column label="图纸描述" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleRemoved(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改图纸集Line对话框 -->
    <el-dialog :visible.sync="open" width="1300px" append-to-body>
      <iframe
        :src="viewData.lineUrl"
        frameborder="0"
        scrolling="auto"
        style="width: 100%; height: 600px;"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { getDrawingline } from "@/api/mes/md/drawingline";
import {
  routeProcessDrawingList,
  addProRouteProcessDrawing,
  delProRouteProcessDrawing
} from "@/api/mes/pro/proRouteProcessDrawing"
import DrawingLineSelect from "./drawingLineSelect.vue";

export default {
  name: "Picture",
  components: {
    DrawingLineSelect
  },
  props: {
    processId: null,
    routeId: null,
    bomId: null,
    drawCode: null,
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bomId: this.bomId,
        routeId: this.routeId,
        processId: this.processId,
        drawCode: this.drawCode,
      },
      // 工艺工序图纸
      form: {},
      // BOM工序图纸集合
      routeProcessDrawingList: [],
      // 图纸数据
      viewData: {},
      // 图纸开关
      open: false,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    'processId': function (newValue, oldValue) {
      this.queryParams.processId = newValue;
      this.getList();
    },
    'routeId': function (newValue, oldValue) {
      this.queryParams.routeId = newValue;
      this.getList();
    },
    'bomId': function (newValue, oldValue) {
      this.queryParams.bomId = newValue;
      this.getList();
    },
    'drawCode': function (newValue, oldValue) {
      this.queryParams.drawCode = newValue;
      this.getList();
    }
  },
  methods: {
    /** 查询BOM工序图纸列表 */
    getList() {
      routeProcessDrawingList(this.queryParams).then(response => {
        this.routeProcessDrawingList = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: null,
        routeId: this.routeId,
        drawCode: null,
        routeName: null,
        processId: this.processId,
        processCode: null,
        processName: null,
        drawingId: null,
        lineId: null,
        lineName: null,
        lineNumber: null,
        bomId: this.bomId,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    handleAdd() {
      this.$refs.drawingLineSelect.showFlag = true;
    },
    // 图纸回显
    onDrawSelected(rows) {
      if(rows !== undefined && rows !== null){
        rows.some(row => {
          this.reset();
          this.form.drawingId = row.drawingId;
          this.form.lineId = row.id;
          this.form.lineName = row.lineName;
          this.form.lineNumber = row.lineNumber;
          this.form.remark = row.remark;
          addProRouteProcessDrawing(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.getList();
          }).catch(err => {
            this.$modal.msgError(err.msg);
          })
        })
      }
    },
    // 删除
    handleRemoved(row) {
      this.$modal.confirm('确定删除该工序图纸吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProRouteProcessDrawing(row.recordId).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.getList();
        });
      }).catch(() => {
        this.$modal.msgError("取消删除！");
        return false;
      })
    },
    // 查看图纸
    handleView(row) {
      this.open = true;
      getDrawingline(row.lineId).then(response => {
        this.viewData = response.data;
      })
    },
    // 图纸取消按钮
    cancel() {
      this.open = false;
    },

  }
};
</script>
